// 挂载到 main.js 中的 mixins(混入)，设置每次进入任何页面，都会刷新显示 tabBar 栏购物车图标右上角的圆形数字徽标
// 挂载到 main.js 的好处，就是进入任何页面都会生效，而不用每个页面分别挂载那么麻烦
import {mapState, mapActions, mapMutations, mapGetters} from 'vuex'

export default {
  onShow() {
    // 每次进入该页面，都会刷新显示tabBar栏购物车图标右上角的徽标数字为购物车的商品件数
    this.setBadge()
  },
  computed: {
    ...mapGetters('m_cart', ['goodsTotal'])
  },
  watch: {
    // 定义购物车中商品数量 goodsTotal 监听器
    goodsTotal(newVal, oldVal) {
      this.setBadge()
    }
  },
  methods: {
    // 设置显示tabBar栏购物车图标右上角的徽标数字为购物车的商品件数
    setBadge() {
      // 如果购物车的商品件数不为0，才设置购物车图标右上角的徽标数字，如果为0，
      // 设置后会显示0，而uni-goods-nav商品导航组件的徽标不同，设置为0不会显示
      // if(this.goodsTotal !== 0) {
        uni.setTabBarBadge({
          index: 2,  // tabBar栏图标索引，从0开始
          text: this.goodsTotal + ''  // text属性必须为字符串型，否则不显示
        })
      // }
    }
  }
}